<template>
  <div
    class="Function"
    style="margin-bottom: 30px; display: flex; justify-content: space-between"
  >
    <h2 class="title01">生长模块</h2>
    <div style="display: flex; margin-bottom: 20px">
      <el-form :model="Founder" ref="formRe" style="margin-right: 20px">
        <div class="mt-4">
          <el-input
            v-model.trim="Founder.plantname"
            style="width: 400px"
            placeholder="请输植被名"
            class="input-with-select"
          >
          </el-input>
          <el-button type="primary" @click="handleSearch(Founder)"
            >搜索</el-button
          >
        </div>
      </el-form>
      <el-button type="primary" @click="openAddDialog" :disabled="add"
        >新增</el-button
      >
    </div>
  </div>
  <!-- <el-button link type="primary" @click="delts">删除</el-button> -->

  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="plantname" label="植被名" />
      <el-table-column prop="growthrate" label="生长速率" />
      <el-table-column prop="plantheight" label="植物高度" />
      <el-table-column prop="planwidth" label="植物宽度" />
      <el-table-column prop="survivalrate" label="幼苗存活率" />
      <el-table-column prop="leafarea" label="叶面积" />
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="Pagination">
    <div class="example-demonstration"></div>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPagea"
      @current-change="currentChange"
    />
  </div>

  <!-- 增加弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="640"
    style="height: 400px"
    :before-close="handleClose"
    @close="handleClose"
  >
    <div style="width: 100%; height: 600px">
      <el-form :model="formData" ref="formRef">
        <el-input
          v-model="formData.plantname"
          style="width: 240px; margin-left: 10px"
          :placeholder="plantname"
          disabled="true"
        />
        <el-row :gutter="10">
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.growthrate"
                style="width: 240px"
                placeholder="生长速率"
              />
            </div>
          </el-col>
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.plantheight"
                style="width: 240px"
                placeholder="植物高度”"
              />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.branchesnumber"
                style="width: 240px"
                placeholder="分支数量"
              />
            </div>
          </el-col>
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.survivalrate"
                style="width: 240px"
                placeholder="幼苗存活率"
              />
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.leafarea"
                style="width: 240px"
                placeholder="叶面积"
              />
            </div>
          </el-col>
          <el-col :span="10" style="margin: 10px">
            <div class="grid-content ep-bg-purple">
              <el-input
                v-model="formData.planwidth"
                style="width: 240px"
                placeholder="输入植物宽度"
              />
            </div>
          </el-col>
        </el-row>
      </el-form>

      <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { getgrow, getgrowadd, getgrows, getplant } from "../../api/Grow/index";
import { ref, onMounted } from "vue";
const currentPage = ref();
const dialogVisible = ref(false);
const tableData = ref([]);
const formRef = ref(null);
const formRe = ref(null);
const formData = ref({
  gid: "",
});
const dialogTitle = ref("");
const Founder = ref([]);
const deviceOptions = ref([]);
const total = ref([]);
const add = ref(true);
const tableDataJudgment = ref();
const plantname = ref();
//搜索
const handleSearch = (e) => {
  if (e.plantname == undefined) {
    // 当 plantname 为空时，重新调用 get 函数
    get();
    // 提示数据为空
    ElMessage.warning("请输入植被名");
  } else {
    getgrows(e.plantname).then((res) => {
      tableData.value = res.data.records;
      // 跳转到首页
      currentPage.value = 1;
    });
  }
};
//判断新增按钮时候可以按
const panduan = () => {
  // if (submitForm) {
  //   return add.value = true;
  // }
  if (tableDataJudgment.value == true) {
    add.value = false;
  } else {
    add.value = true;
  }
};

const currentChange = (newpage) => {
  currentPage.value = newpage;
  get(newpage);
};

const openAddDialog = () => {
  dialogVisible.value = true;
  dialogTitle.value = "新增内容";
  Nowpalant();
  panduan();
};

//获取现在的植物
const Nowpalant = () => {
  getplant().then((res) => {
    res.data.map((item) => {
      formData.value.gid = item.gid;
      plantname.value = "胡萝卜" || item.name;
    });
  });
};
//获取
const get = () => {
  getgrow({
    pageNum: currentPage.value,
  }).then((res) => {
    // console.log(res);
    tableDataJudgment.value = res.need;
    console.log(tableDataJudgment.value, "qq");
    tableData.value = res.data.records;
    const uniqueDeviceNames = [
      ...new Set(tableData.value.map((item) => item.deviceName)),
    ];
    // 将去重后的设备名转换为 options 格式
    deviceOptions.value = uniqueDeviceNames.map((name) => ({
      value: name,
      label: name,
    }));
    total.value = res.data.total;
    panduan();
  });
};

//获取
onMounted(() => {
  get();
});
//添加
const submitForm = () => {
  console.log("提交的数据:", formData.value); // 检查提交的数据

  // 检查 formData.value 是否有空的必要字段
  if (
    !formData.value.survivalrate ||
    !formData.value.plantheight ||
    !formData.value.planwidth ||
    !formData.value.leafarea ||
    !formData.value.growthrate
  ) {
    // 使用 ElMessage 显示错误消息
    ElMessage.error("请填写所有必填字段");
    return; // 如果有字段为空，则提前返回，不执行添加操作
  }

  dialogTitle.value = "新增内容";
  // getgrowadds(nowgid.value).then((res) => {
  //   console.log(res);
  // })
  getgrowadd(formData.value)
    .then((res) => {
      dialogVisible.value = false;
      add.value = true;
      get(); // 重新获取数据以更新列表
    })
    .catch((error) => {
      // 处理添加操作失败的情况
      ElMessage.error("添加失败: " + error.message);
    });
};
//重置
const handleClose = () => {
  formData.value = {
    plantname: "",
    growthrate: "",
    plantheight: "",
    planwidth: "",
    survivalrate: "",
    leafarea: "",
  };
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.title01 {
  margin: 0;
  height: 35px;
  line-height: 15px;
  // margin-left: 10px;
  // margin-top: 8px;
  font-size: 20px;
  font-weight: bold;
  border-left: 5px solid #409eff;
  padding: 10px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.Pagination {
  width: 100%;

  margin-top: 50px;
}
</style>
